<template>
	<div>
		<el-col class="personal-info">
			<el-card shadow="hover">
				<template #header>
					<span>消息提示</span>
				</template>
				<div v-if="newsList.length > 0">
					<el-collapse accordion class="personal-info-ul" @change="collapseChange">
						<el-collapse-item :name="k" :title="v.title" v-for="(v, k) in newsList" :key="k">
							<template #title>
								{{ v.title }}
							</template>
							<div>{{ v.content }}</div>
							<el-text class="to-detail" v-if="checkDetailShow(v.type)" :class="{ active: v.is_read === 1 }"
								@click="toMsgDetail(v)">查看详情</el-text>
						</el-collapse-item>

					</el-collapse>
					<el-row class="pagination-block" justify="center">
						<el-pagination :hide-on-single-page="isSinglePage" v-model:current-page="newsCurrentPage"
							v-model:page-size="newsPageSize" :small="small" :disabled="disabled" :background="background"
							layout="prev, pager, next, jumper" :total="newsTotalPage" @size-change="handleSizeChange"
							@current-change="handleCurrentChange" />
					</el-row>
				</div>
				<div v-else class="mt30 mb30">暂无新消息</div>
			</el-card>
		</el-col>
	</div>

</template>

<script setup lang="ts" name="personal">
import { computed, ref } from 'vue';
import { useIndexApi } from '/@/api/index';
import router from '/@/router/index';
const newsCurrentPage = ref(1)
const newsPageSize = ref(5)
const small = ref(false)
const background = ref(false)
const newsTotalPage = ref(1);
function checkDetailShow(type: string) {
	return type === 'relayNotify' || type === 'applySuc' || type === 'applyFail'
}
const isSinglePage = ref(false)
const disabled = ref(false)
const handleSizeChange = (val: number) => {
	console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
	console.log(`current page: ${val}`)
}

const newsList = ref([])
async function getUserNews() {
	const res = await useIndexApi().msgList({
		"pageSize": newsPageSize.value,
		"pageNo": newsCurrentPage.value,
	});
	newsTotalPage.value = res.data.total
	newsList.value = [...res.data.list];
	// newsList.value = [{ type: 123, title: 'gggg', id: 1, is_read: 0 }, { type: 123, title: 'gggg', id: 2, is_read: 1 }, { type: 123, title: 'gggg', id: 3, is_read: 0 }, { type: 456, title: 'dnxgd', id: 4, is_read: 1 }];

}
getUserNews()

async function toMsgDetail(data) {
	let url = '';
	// registerSuc = 首次注册审核成功
	// updateUserInfoSuc = 资料审核成功
	// updateUserInfoFail = 资料审核失败
	// delivery = 物流发送通知
	switch (data.type) {
		case 'relayNotify':
			url = '/question/list'
			break;
		case 'applySuc':
		case 'applyFail':
			url = '/activity/my'
			break;
		default:
			break;
	}
	if (url !== '') {
		router.push({ path: url })
	}
}
async function collapseChange(val: string[]) {
	if (val.toString() !== '') {
		const data = newsList.value[val];
		if (data.is_read !== 1) {
			await useIndexApi().msgRead({
				"id": data.id,
			});
		}
	}
}
</script>

<style scoped lang="scss">
@import '../../theme/mixins/index.scss';

.to-detail {
	cursor: pointer;
	color: red;
	line-height: 40px;
	font-size: 14px;

	&.active {
		color: #999;
	}
}

.personal-info {
	margin: 20px;

	.personal-info-more {
		float: right;
		color: var(--el-text-color-secondary);
		font-size: 13px;

		&:hover {
			color: var(--el-color-primary);
			cursor: pointer;
		}
	}

	.personal-info-ul {
		list-style: none;
		margin-bottom: 20px;

		.personal-info-li {
			font-size: 13px;
			padding-bottom: 10px;

			.personal-info-li-title {
				display: inline-block;
				@include text-ellipsis(1);
				color: var(--el-text-color-secondary);
				text-decoration: none;
			}

			& a:hover {
				color: var(--el-color-primary);
				cursor: pointer;
			}
		}
	}
}
</style>
